<template>
  <div>
    <div class="centered-box">
      <div class="header">
        <span class="title">凭证列表</span>
      </div>
      <hr />
      <div>
        <el-select v-model="params.queryData" size="large" style="width: 240px" @change="handleQuery">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-button class="button" style="margin-left: 690px;" @click="examine">审核</el-button>
        <el-button class="button" @click="reExamine">反审核</el-button>
        <el-button class="button" @click="cancellation">作废</el-button>
        <el-button class="button" @click="renew">恢复</el-button>
        <el-button class="button" @click="handleExport">导出</el-button>
        <el-button class="button" icon="Search" @click="handleQuery">搜索</el-button>
      </div>
      <div class="header-container">
        <span>摘要</span>
        <span style="margin-left: 50px;">科目</span>
        <span style="margin-left: 100px;">借方金额</span>
        <span style="margin-left: 248px;">贷方金额</span>
      </div>
      <div v-for="(items, index) in voucherData" :key="index" class="card">
        <div class="card-header">
          <el-checkbox @change="(val) => selectIds(val, items.id)" size="large" /> <span>日期: {{ items.voucherDate }} 凭证字号: {{
            items.word }}--{{ items.code }}</span>
            
          <el-icon v-if="items.carryForward === 1">
            <Check style="color: green;" />
          </el-icon>
          <el-icon v-if="items.isFlag === 1">
            <CloseBold style="color: red;" />
          </el-icon>
          <a @click="openPunch(items.id)" style="font-size: 15px; color: #90C0C6; margin-left: 860px;">红冲</a>
        </div>
        <div class="card-body">
          <el-table :data="items.details" show-summary :show-header="false" class="table">
            <el-table-column prop="summary" label="摘要" width="380" />
            <el-table-column prop="subjectName" label="科目" width="420" />
            <el-table-column prop="debitAmount" label="借方金额" width="460" />
            <el-table-column prop="creditAmount" label="贷方金额" />
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" title="凭证红冲" width="500">
      <el-form :model="params">
        <el-form-item label="新凭证日期" :label-width="formLabelWidth">
          <div class="block">
            <el-date-picker v-model="params.voucherDate" type="date" :size="size" />
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="punch">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { listVoucher, updateCarryForward, updateReCarryForward, cancellationService, renewService, punchService } from "../../../api/system/voucher";
import { ElMessage } from "element-plus";
const dialogFormVisible = ref(false)
const { proxy } = getCurrentInstance();
const params = ref({
  id: '',
  ids: [],
  voucherDate: '',
  tenantId: '',
  queryData: '2025,1'
})

const voucherData = ref([]);
const handleQuery = () => {
  getVoucherList();
}
const selectIds = (checked, id) => {
  if (checked) {
    // 选中时添加 ID（防止重复）
    if (!params.value.ids.includes(id)) {
      params.value.ids.push(id);
    }
  } else {
    // 取消选中时移除 ID
    params.value.ids = params.value.ids.filter(item => item !== id);
  }
};
const openPunch = (id) => {
  params.value.id = id;
  dialogFormVisible.value = true
}
function handleExport() {
  proxy.download('system/voucher/export/' + params.value.ids, {
  })
}

const punch = () => {
  punchService(params.value).then(res => {
    if (res.code == 200) {
      ElMessage.success('红冲成功')
      getVoucherList();
      dialogFormVisible.value = false;
    } else {
      ElMessage.error(res.msg)
    }

  })

}

const examine = () => {
  if (params.value.ids.length == 0) {
    ElMessage.warning('请选择凭证')
    return false
  }

  updateCarryForward(params.value.ids).then(res => {
    if (res.code == 200) {
      ElMessage.success('审核成功')
      getVoucherList();
    } else {
      ElMessage.error('错误')
    }
  })
}
const reExamine = () => {
  if (params.value.ids.length == 0) {
    ElMessage.warning('请选择凭证')
    return false
  }
  updateReCarryForward(params.value.ids).then(res => {
    if (res.code == 200) {
      ElMessage.success('成功')
      getVoucherList();
    } else {
      ElMessage.error('错误')
    }
  })
}
const cancellation = () => {
  if (params.value.ids.length == 0) {
    ElMessage.warning('请选择凭证')
    return false
  }
  cancellationService(params.value.ids).then(res => {
    if (res.code == 200) {
      ElMessage.success('成功')
      getVoucherList();
    } else {
      ElMessage.error('错误')
    }
  })
}
const renew = () => {
  if (params.value.ids.length == 0) {
    ElMessage.warning('请选择凭证')
    return false
  }
  renewService(params.value.ids).then(res => {
    if (res.code == 200) {
      ElMessage.success('成功')
      getVoucherList();
    } else {
      ElMessage.error('错误')
    }
  })
}


/* 
 */
const getVoucherList = () => {
  const setsId = sessionStorage.getItem('setsId');

  if (setsId == null) {
    ElMessage({
      message: '请先选择账套',
      type: 'warning'
    })
  }

  params.value.tenantId = setsId;
  listVoucher(params.value).then((response) => {
    voucherData.value = response.rows;
  });
};


const options = [
  {
    value: '2025,1',
    label: '2025年第01期'
  },
  {
    value: '2025,2',
    label: '2025年第02期',


  },
  {
    value: '2025,3',
    label: '2025年第03期',

  },
  {
    value: '2025,4',
    label: '2025年第04期',

  },
  {
    value: '2025,5',
    label: '2025年第05期',

  },
  {
    value: '2025,6',
    label: '2025年第06期',

  },
  {
    value: '2025,7',
    label: '2025年第07期',

  },
  {
    value: '2025,8',
    label: '2025年第08期',

  },
  {
    value: '2025,9',
    label: '2025年第09期',

  },
  {
    value: '2025,10',
    label: '2025年第10期',

  },
  {
    value: '2025,11',
    label: '2025年第11期',

  },
  {
    value: '2025,12',
    label: '2025年第12期',

  },
]


onMounted(() => {
  getVoucherList();

});
</script>

<style scoped>
/* 页面通用样式 */
.centered-box {
  margin: 0 auto;
  width: 90%;
  max-width: 1400px;
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.button-container {
  display: flex;

}

.button {
  height: 40px;
  width: 60px;
  margin-bottom: 20px;
  margin-left: 10px;

}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  margin-bottom: 20px;
}

.title {
  font-size: 28px;
  font-weight: bold;
  color: #343a40;
}

hr {
  margin: 20px 0;
  border: 0;
  height: 1px;
  background: #e9ecef;
}

/* 下拉菜单样式 */
.dropdown-container {
  width: 200px;
  margin-bottom: 20px;
}

.dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border: 1px solid #007bff;
  border-radius: 4px;
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
  font-size: 16px;
  transition: background-color 0.3s;
}

.dropdown-header:hover {
  background-color: #0056b3;
}

.dropdown-menu {
  position: absolute;
  margin-top: 5px;
  padding: 0;
  width: 200px;
  list-style: none;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.dropdown-menu li {
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dropdown-menu li:hover {
  background-color: #f8f9fa;
}

.arrow-icon {
  border: solid white;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  transition: transform 0.3s;
}

.rotate {
  transform: rotate(-135deg);
}

/* 表头容器 */
.header-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  background-color: #007bff;
  color: #fff;
  padding: 10px 40px;
  border-radius: 4px;
  font-size: 18px;
  margin-bottom: 20px;
}

/* 卡片样式 */
.card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 20px;
}

.card-header {
  font-size: 16px;
  font-weight: bold;
  color: #495057;
  margin-bottom: 15px;
}

.card-body {
  padding: 10px 0;
}

/* 表格样式 */
.table {
  margin-top: 10px;
}

.el-table {
  border: none;
}

.el-table thead {
  display: none;
}

.el-table td {
  padding: 10px;
  font-size: 16px;
  color: #495057;
}
</style>
